<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>常用的分页导航（不定项水平居中）</title>
    <style>
      /* 清除格式 */
      body {
        padding: 0;
        margin: 0;
      }
      a {
        text-decoration: none;
        color: initial;
      }

      /* 格式 */
      .pagination {
        width: 100%;
        background-color: azure;
        font-size: 0px;
        text-align: center;

        padding: 20px 0;
      }
      .pagination a,
      .pagination span {
        font-size: 16px;
        background-color: #fff;

        display: inline-block;
        height: 30px;
        line-height: 30px;

        margin: 0 3px;
        border: 1px solid #ddd;
        padding: 0 10px;
      }
      .pagination span {
        background-color: rgb(219, 54, 54);
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="pagination">
      <a href="">&lt</a>
      <span>1</span>
      <a href="">2</a>
      <a href="">3</a>
      <a href="">4</a>
      <a href="">5</a>
      <a href="">5</a>
      <a href="">5</a>
      <a href="">5</a>
      <a href="">5</a>
      <a href="">...</a>
      <a href="">100</a>
      <a href="">&gt</a>
    </div>
  </body>
</html>
